<template>
  <view class="container">
    <view class="title">输入车牌</view>
    <!-- 车牌显示区域 -->
    <view class="plate">
      <view
        v-for="(item, i) in panelData"
        :key="i"
        :class="['item', { active: index === i }]"
        @click="handleChange(i)"
      >
        {{ item }}
      </view>
      <view
        class="item child"
        :class="['item', { active: index === 7 }]"
        @click="handleFresh"
        >{{ isFresh ? fresh : "+新能源" }}</view
      >
    </view>

    <!-- 键盘区域 -->
    <section class="panel" :class="{ show: show }">
      <view class="header">
        <view class="" @click="panelReset">重置</view>
        <view class="" @click="panelOpen">关闭</view>
      </view>
      <view class="key-contanier">
        <template v-if="index === 0">
          <view
            class="key-words"
            v-for="char in provincePanelData"
            @click="handleKey(char)"
            >{{ char }}</view
          >
        </template>
        <template v-else>
          <view
            class="key-words"
            v-for="char in characterData"
            @click="handleKey(char)"
            >{{ char }}</view
          >
        </template>
      </view>
    </section>
  </view>
</template>

<script setup>
import { ref } from "vue";
const index = ref(0);
const show = ref(false);
const panelData = ref(["苏", "", "", "", "", "", ""]);
const isFresh = ref(false);
const fresh = ref("");
const emit = defineEmits(["changeKeyword"]);
defineProps({
  provincePanelData: {
    type: Array,
    default: () => [
      "京",
      "沪",
      "粤",
      "津",
      "冀",
      "晋",
      "蒙",
      "辽",
      "吉",
      "黑",
      "苏",
      "浙",
      "皖",
      "闽",
      "赣",
      "鲁",
      "豫",
      "鄂",
      "湘",
      "桂",
      "琼",
      "渝",
      "川",
      "贵",
      "云",
      "藏",
      "陕",
      "甘",
      "青",
      "宁",
      "新",
      "使",
      "领",
      "警",
      "学",
      "港",
      "澳",
    ],
  },
  characterData: {
    type: Array,
    default: () => [
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      0,
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "J",
      "K",
      "L",
      "M",
      "N",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z",
      "港",
      "澳",
      "学",
      "领",
      "挂",
    ],
  },
});
const handleChange = (i) => {
  index.value = i; // 更新当前选中的格子
  show.value = true; // 显示键盘
};
//重置输入框内容
const panelReset = () => {
  index.value = 0;
  isFresh.value = false;
  fresh.value = "";
  panelData.value = ["苏", "", "", "", "", "", ""];
};
const panelOpen = () => {
  show.value = false;
};
const handleKey = (char) => {
  if (index.value === 7) {
    fresh.value = char;
    isFresh.value = true;
    return;
  }
  if (index.value < 7) {
    panelData.value[index.value] = char;
    index.value++;
	emit("changeKeyword", char);
  }
};
const handleFresh = () => {
  isFresh.value = true;
  index.value = 7;
  show.value = true;
};
</script>

<style lang="less">
// 外层容器
.container {
  position: relative;
  // min-height: 100vh;
  background-color: #f9f9f9;
}
.title {
  width: 160rpx;
  height: 40rpx;
  font-family: "Source Han Sans CN, Source Han Sans CN";
  font-weight: bold;
  font-size: 40rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  text-transform: none;
  margin-left: 32rpx;
  margin-top: 54rpx;

}

// 车牌区域
.plate {
  width: 100%;
  display: flex;
  gap: 14rpx;
  align-items: center;
  margin-top: 48rpx;
  margin-left: 32rpx;

  .item {
    width: 72rpx;
    height: 80rpx;
    background: #ffffff;
    border-radius: 4rpx;
    border: 2rpx solid #d4d4d4;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      border-color: #0680fe;
    }

    // 专门针对 "+新能源" 按钮
    &.child {
      background: #e8f5e8;
      border: 2rpx solid #28b162;
      color: #28b162;
      font-weight: 400;
      text-align: center;
    }
  }
}

// 键盘区域（独立于 .plate）
.panel {
  width: 100%;
  background: #f0f0f0;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateY(100%); // 初始隐藏在屏幕下方
  transition: transform 0.3s ease;
  z-index: 999;
  border-top: 1rpx solid #ddd; // 可选：加个边框更美观

  &.show {
    transform: translateY(0); // 显示时滑入
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .key-contanier {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;
    gap: 20rpx;
    /* 按键间距 */
    .key-words {
      width: 64rpx;
      height: 64rpx;
      background: #fff;
      border: 1rpx solid #ddd;
      border-radius: 8rpx;
      font-size: 32rpx;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
